<template>
	<div>
		<mt-swipe :auto="4000">
			<!-- 在组件中使用 v-for 循环，一定要使用key -->
			<!-- 调用 轮播图组件，传递 lunbotuList -->
			<!-- lunbotuList是父组件向子组件传值来设置 -->
			<mt-swipe-item v-for="item in lunbotuList" :key="item.id">
				<img :src="item.img" alt="" :class="{ full: isfull }" />
			</mt-swipe-item>
		</mt-swipe>
	</div>
	<!-- 分析：商品详情页面中的轮播图被拉伸的原因 -->
	<!-- 1. 首页中的轮播图的宽高被设置为100% -->
	<!-- 2. 商品详情页面中，如果也使用宽高100%，页面会被拉伸 -->
	<!-- 3. 商品详情页的轮播图，应该是 高度100%，宽度自适应 -->
	<!-- 4. 解决：统一 主页轮播图 和 商品详情页轮播图 的图片宽度 -->
	<!-- 5. 定义一个属性，调用轮播图时，手动指定宽度是否为100% -->
</template>

<script>
export default {
	props: ['lunbotuList', 'isfull'],
}
</script>
<style lang="scss" scoped>
// 轮播图样式
.mint-swipe {
	height: 200px;

	.mint-swipe-item {
		text-align: center;
		// &:nth-child(1) {
		// 	background-color: red;
		// }
		// &:nth-child(2) {
		// 	background-color: blue;
		// }
		// &:nth-child(3) {
		// 	background-color: cyan;
		// }

		img {
			// width: 100%;
			height: 100%;
		}
	}
}

.full {
	width: 100%;
}
</style>